<template>
	<view class="container">
		<!-- 广告轮播图 -->
		<view class="wrap">
			<u-swiper :list="imglist" height="240"></u-swiper>
		</view>
		<view style="padding: 15rpx;">
			<view class="tab">
				<view class="tab-nav">
					<view class="tab-nav-item" :class="tab == 0 ? ' tab-active' : ''" @click="changeTab(0)"><text
							:class="tab == 0 ? 'text-' + themeColor.name : ''">单程</text>
					</view>
					<view class="tab-nav-item" :class="tab == 1 ? ' tab-active' : ''" @click="changeTab(1)"><text
							:class="tab == 1 ? 'text-' + themeColor.name : ''">往返</text>
					</view>
				</view>
				<view class="tab-panel">
					<!-- 酒店预订 begin -->
					<view class="tab-panel-item" :class="tab == 0 ? ' tab-active' : ''">
						<view class="city-select b-line">
							<view class="city-swap"></view>
							<view v-if="Departurecrity.airportShortName == undefined" class="city-select-item"
								@click="changeCity(0)" style="font-size: 34rpx;">{{ Departurecrity.cityName }}</view>
							<view v-if="Departurecrity.airportShortName !== undefined" class="city-select-item"
								@click="changeCity(0)" style="font-size: 34rpx;">{{ Departurecrity.airportShortName }}
							</view>
							<view v-if="destinationcrity.airportShortName == undefined" class="city-select-item city-fr"
								@click="changeCity(1)" style="font-size: 34rpx;">{{ destinationcrity.cityName }}
							</view>
							<view v-if="destinationcrity.airportShortName !== undefined"
								class="city-select-item city-fr" @click="changeCity(1)" style="font-size: 34rpx;">
								{{ destinationcrity.airportShortName }}
							</view>
						</view>
						<view @click="changetime(1)" class="city-select b-line city-calendar">
							<view class="city-select-item" style="display: flex;align-items: center;">
								<h2>
									<text style="font-size: 40rpx;" v-if="onetime.month == undefined">出发日期</text>
									<text style="font-size: 40rpx;" v-else>{{ onetime.month + '月' + onetime.day
										}}</text>
									<text style="font-size: 40rpx;">{{ onetime.week }}</text>
								</h2>
							</view>
						</view>
						<view class="flex flex-mar b-line">
							<view class="flex-head">
								<picker @change="GradePickerChange" :value="index" :range="array" range-key="name">
									<view class="uni-input">{{ array[index].name }}</view>
								</picker>
							</view>

						</view>
						<view class="flex-button-box"><u-button type="primary" @click="searchticketTwo()"
								text="飞机票查询"></u-button></view>
					</view>
					<!-- 酒店预订 end -->

					<!-- 机票预订 begin -->
					<view class="tab-panel-item" :class="tab == 1 ? ' tab-active' : ''">
						<view class="city-select b-line">
							<view class="city-swap"></view>
							<view v-if="Departurecrity.airportShortName == undefined" class="city-select-item"
								@click="changeCity(0)" style="font-size: 34rpx;">{{ Departurecrity.cityName }}</view>
							<view v-if="Departurecrity.airportShortName !== undefined" class="city-select-item"
								@click="changeCity(0)" style="font-size: 34rpx;">{{ Departurecrity.airportShortName }}
							</view>
							<view v-if="destinationcrity.airportShortName == undefined" class="city-select-item city-fr"
								@click="changeCity(1)" style="font-size: 34rpx;">{{ destinationcrity.cityName }}
							</view>
							<view v-if="destinationcrity.airportShortName !== undefined"
								class="city-select-item city-fr" @click="changeCity(1)" style="font-size: 34rpx;">
								{{ destinationcrity.airportShortName }}
							</view>
						</view>
						<view class="city-select b-line city-calendar">
							<view @click="changetime(2)" class="city-select-item"
								style="display: flex;align-items: center;">
								<h2>
									<text style="font-size: 40rpx;" v-if="twetime.startMonth == undefined">选择日期</text>

									<text style="font-size: 40rpx;" v-else>{{ twetime.startMonth + '月' +
				twetime.startDay }}</text>
									<text style="font-size: 40rpx;">{{ twetime.startWeek }}</text>
								</h2>
							</view>
							<view class="city-select-item" style="display: flex;align-items: center;">
								<h2>
									<text style="font-size: 40rpx;" v-if="twetime.endMonth == undefined"></text>
									<text style="font-size: 40rpx;" v-else>{{ twetime.endMonth + '月' +
				twetime.endDay }}</text>
									<text style="font-size: 40rpx;">{{ twetime.endWeek }}</text>
								</h2>
							</view>
						</view>
						<view class="flex flex-mar b-line">
							<view class="flex-head">
								<picker @change="GradePickerChange" :value="index" :range="array" range-key="name">
									<view class="uni-input">{{ array[index].name }}</view>
								</picker>
							</view>
						</view>
						<view class="flex-button-box"> <u-button type="primary" @click="searchticketTwo()"
								text="飞机票查询"></u-button>
						</view>
					</view>
					<!-- 机票预订 end -->
				</view>
			</view>
			<!-- 			<view class="ggitem" style="width: 100%;" v-for="(item,index) in dbgglist">
				<image style="width: 100%;" :src="item.cover" mode="widthFix"></image>
			</view> -->
			<view class="ggitem" style="width: 100%;">
				<view style="width: 50%;text-align: center;margin: 0 auto;margin-top: 100rpx;margin-bottom: 30rpx;"
					v-for="(item, index) in xxlist">
					<image :src="item.cover" mode="widthFix"></image>
				</view>
			</view>

			<!-- 时间选择器 -->


			<u-calendar max-date="2050-01-01" :show="show" :mode="mode" @close="cancel"
				@confirm="changeday"></u-calendar>
			<!-- 特价机票 -->

		</view>

	</view>
</template>

<script>

export default {
	components: {

	},
	data() {
		return {
			path: '/pages/pet/ticket/ticket',
			title: '机票预定',
			Departurecrity: {
				cityName: '出发地'
			},
			citys: {
				id: 0,
				title: '全国'
			},
			destinationcrity: {
				cityName: '目的地'
			},
			city: '',
			popupshow: false,
			flowList: [],
			lists: [{
				image: 'https://img95.699pic.com/photo/50092/9420.jpg_wh300.jpg',
				title: '蒹葭苍苍，白露为霜。所谓伊人，在水一方'
			},
			{
				image: 'https://img95.699pic.com/desgin_photo/40018/5298_detail.jpg!/fw/320/clip/0x432a0a0/unsharp/true',
				title: '溯洄从之，道阻且长。溯游从之，宛在水中央'
			},
			{
				image: 'https://img95.699pic.com/desgin_photo/40106/2539_detail.jpg!/fw/320/clip/0x432a0a0/unsharp/true',
				title: '蒹葭萋萋，白露未晞。所谓伊人，在水之湄'
			}
			],
			imglist: [

				'https://pl.sdsj88.cn/uploads/20240307/air.jpg',

			],
			show: false,
			mode: 'range',
			onetime: {},
			twetime: {},
			tab: 0,
			array: [{
				name: '经济/公务/头等舱',
				id: 0
			}, {
				name: '经济舱',
				id: 1
			}, {
				name: '公务舱',
				id: 2
			}, {
				name: '头等舱',
				id: 3
			}],
			index: 0,
			address: {
				hotel: '昆明',
				tickets: ['昆明', '杭州']
			},
			qqmapsdk: null,
			dbgglist: [],
			xxlist: [
				{
					cover: ""
				}
			]
		};
	},
	onLoad() {

	},
	onShow() {

	},
	// 小程序分享
	onShareTimeline(res) {

	},
	onShareAppMessage() {

	},
	methods: {
		getlist() {
			// this.clear()
			this.list = []
			this.flowList = []
			let date = new Date(); //Fri Oct 29 2021 16:37:56 GMT+0800 (CST)
			let y = date.getFullYear(); //获取完整的年份(4位)
			let m = date.getMonth() + 1; //获取当前月份(0-11,0代表1月)
			let d = date.getDate(); //获取当前日(1-31)
			let ds = date.getDate() + 1
			var currentDate = y + '-' + m + '-' + d
			var currentDates = y + '-' + m + '-' + ds
			this.form = {
				keyWord: '',
				pageIndex: 1,
				pageSize: 20,
				cityName: this.citys.title,
				provinceName: '',
				themeGroup: '',
				sort: '',
				star: '',
			}
			uni.showLoading({
				title: '加载中'
			});
			if (this.Departurecrity.cityName !== '出发地') {
				this.form.cityName = this.Departurecrity.cityName
			}
			this.$http.post(`${searchScenicList}`, this.form).then(r => {
				console.log(r)
				this.list = r.data.scenicList
				this.addRandomData();
				uni.hideLoading();
			}).catch(() => {
				uni.hideLoading();
			});
		},
		changeTab(e) {
			this.tab = e;
		},
		changetime(val) {
			this.show = true

		},
		changeday(e) {
			console.log(e)
			if (e.endDay == undefined) {
				this.onetime = e
				console.log(this.onetime)
			} else {
				this.twetime = e
			}
		},
		cancel() {
			this.show = false
		},
		changeCity(type) {
			if (type == 0) {
				uni.navigateTo({
					url: '/pagesA/screen/placelist'
				})
			}
			if (type == 1) {
				uni.navigateTo({
					url: '/pagesA/screen/placelist'
				})
			}

		},
	}




};
</script>

<style lang="scss" scoped>
.demo-warter {
	border-radius: 8px;
	margin: 5px;
	background-color: #ffffff;
	padding: 8px;
	position: relative;
}

.u-close {
	position: absolute;
	top: 32rpx;
	right: 32rpx;
}

.demo-image {
	width: 100%;
	border-radius: 4px;
}

.demo-title {
	font-size: 30rpx;
	margin-top: 5px;
	color: $u-main-color;
}

.demo-tag {
	display: flex;
	margin-top: 5px;
}

.demo-tag-owner {
	color: #FFFFFF;
	display: flex;
	align-items: center;
	padding: 4rpx 14rpx;
	border-radius: 50rpx;
	font-size: 20rpx;
	line-height: 1;
}

.demo-tag-text {
	margin-left: 10px;
	border-radius: 50rpx;
	line-height: 1;
	padding: 4rpx 14rpx;
	display: flex;
	align-items: center;
	border-radius: 50rpx;
	font-size: 20rpx;
}

.demo-price {
	font-size: 30rpx;
	margin-top: 5px;
}

.demo-shop {
	font-size: 22rpx;
	color: $u-tips-color;
	margin-top: 5px;
}



.Special_fares {
	background: #fff;
	margin-top: 20rpx;
	border-radius: 20rpx;
	padding: 10rpx;

	.Special_fares_title {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.Special_fares_box {
		.Special_fares_box_item {
			display: flex;
			height: 100rpx;
			width: 98%;

			.Special_fares_titles {
				width: 65%;
				height: 100%;
				background: #fff;
				border: 1rpx solid #e5e5e5;
				border-radius: 10rpx;
				font-size: 30rpx;
				font-weight: bold;
				display: flex;
				justify-content: space-around;
				align-items: center;
			}

			.Special_fares_Price {
				background: #fae3dc;
				width: 35%;
				height: 100%;
				border: 1rpx solid #e5e5e5;
				border-radius: 10rpx;
				display: flex;
				justify-content: space-around;
				align-items: center;
				flex-direction: column;

				.Special_fares_discount {
					background-image: linear-gradient(to right, #f78ca0 0%, #f9748f 19%, #fd868c 60%, #fe9a8b 100%);
					color: #fff;
					border-radius: 20rpx;
					width: 80%;
					text-align: center;
					font-size: 20rpx;
				}

				.fares_Price {
					font-size: 25rpx;
					font-weight: bold;
					color: #f9414a;
				}
			}
		}
	}
}

.steertabar {
	margin-top: 20rpx;

	.steericon {
		height: 40rpx;
	}
}

.container {}

.b-line:after {
	content: '';
	position: absolute;
	z-index: 2;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 2rpx;
	border-bottom: 2rpx solid #e1e1e1;
	transform: scaleY(0.5);
	transform-origin: 0 100%;
}

.flex {
	display: flex;
	align-items: center;
	padding: 30rpx;
	position: relative;
}

.flex-box {
	flex: 1;
	min-width: 0;
	font-size: 28rpx;
	color: #333;
}

.hotel-content {
	width: 750rpx;
	height: 100%;
	position: absolute;
	background-image: linear-gradient(to bottom, #6ccc7b, #119160);
	background-color: #0d8f5e;
	overflow: scroll;
}

.hotel-content-bg {
	background-image: url('http://img.lanyanxi.com/app/enjoybg.png');
	background-size: 100%;
	background-position: top center;
	background-repeat: no-repeat;
	background-color: #0d8f5e;
	width: 750rpx;
	height: 100%;
	position: relative;
	right: 0;
	left: 0;
	top: 0;
	bottom: 0;
	overflow: scroll;
}

.hotel-head {
	background-image: url('http://img.lanyanxi.com/app/enjoytext-title.png');
	background-size: 70%;
	background-position: bottom center;
	background-repeat: no-repeat;
	width: 750rpx;
	height: 210rpx;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
}

.tab {
	width: 100%;
	margin: 0 auto;
	margin-top: 50rpx;
	margin-bottom: 20rpx;
	z-index: 9999;
}

.tab-nav {
	height: 80rpx;
	line-height: 80rpx;
	display: block;
	position: relative;
	overflow: hidden;
	z-index: 1;
	width: 100%;
	border-radius: 20rpx 20rpx 0 0;
}

.tab-nav-item {
	height: 80rpx;
	line-height: 80rpx;
	position: relative;
	text-align: center;
	color: #fff;
	font-size: 34rpx;
	display: block;
	float: left;
	width: 50%;
	background-color: rgba(126, 126, 126, 0.8);
}

.tab-nav-item.tab-active {
	color: #1dd08c;
	font-weight: bold;
	background-color: #fff;
	z-index: 100;
}

.tab-panel {
	position: relative;
	overflow: hidden;
	background: #fff;
	border-radius: 0 0rpx 20rpx 20rpx;
	transition: height 2s;
	padding-bottom: 20rpx;
}

.tab-panel .tab-panel-item {
	width: 100%;
	position: absolute;
	top: 0;
	transform: translateX(-100%);
}

.tab-panel .tab-panel-item.tab-active~.tab-panel-item {
	transform: translateX(100%);
}

.tab-panel .tab-panel-item.tab-active {
	position: relative;
	transition: transform 0.15s;
	transform: translateX(0);
}

.hotel-city {
	font-size: 34rpx;
	font-weight: bold;
}

.hotel-text {
	font-size: 32rpx;
	color: #666666;
	width: 100%;
	text-align: right;
	position: relative;
	padding-right: 40rpx;
}

.flex-mar {
	margin: 0 40rpx;
	padding: 30rpx 0;
}

.Date_lr {
	width: 30%;
	text-align: center;
	line-height: 40rpx;
}

.calendar-days {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 28rpx;
	color: #0bc66f;
	padding: 4rpx 16rpx;
	line-height: 40rpx;
	background-color: #fff;
	border-bottom: 2rpx solid #0bc66f;
}

.checkinout {
	height: 100rpx;
	line-height: 100rpx;
	position: relative;
	padding: 4rpx 0;
	display: -webkit-box;
	display: flex;
	background-color: #fff;
	margin: 0 40rpx;
}

.firstSelect p {
	line-height: 50rpx;
	color: #585858;
	font-size: 24rpx;
}

.flex-head {
	font-size: 30rpx;
	color: #222222;
	padding-left: 10rpx;
}

.flex-button-box {
	padding: 20rpx 40rpx;
}

.flex-button-btn {
	text-align: center;
	position: relative;
	border: none;
	pointer-events: auto;
	width: 100%;
	display: block;
	font-size: 38rpx;
	line-height: 88rpx;
	margin-top: 18rpx;
	color: #fff;
	border-radius: 200rpx;
	height: 88rpx;
	outline: none;
}

.flex-button-btn:hover {
	outline: none;
}

.flex-search {
	color: #666666;
	font-size: 26rpx;
	padding-left: 10rpx;
}

.city-select {
	position: relative;
	display: flex;
	align-items: center;
	height: 100rpx;
	padding: 0 20rpx;
	margin: 0 40rpx;
}

.city-swap {
	position: absolute;
	left: 50%;
	top: 50%;
	color: #b9b9b9;
	transform: translate(-50%, -50%);
	width: 50rpx;
	height: 50rpx;
	background: url('@/static/jipiao.png') no-repeat;
	background-size: contain;
}

.city-select-item {
	width: 45%;
	margin-right: 10%;
	line-height: 84rpx;
	height: 84rpx;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: #212121;
	font-weight: bolder;
}

.city-select .city-fr {
	width: 45%;
	float: right;
	line-height: 84rpx;
	height: 84rpx;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: #212121;
	margin-right: 0;
	text-align: right;
}

.city-calendar .city-select-item {
	line-height: normal;
}

.city-calendar .city-fr {
	text-align: left;
}

.city-calendar .city-select-item p {
	color: #666666;
	font-size: 32rpx;
	font-weight: normal;
	padding-top: 6rpx;
	line-height: 36rpx;
}

.city-calendar .city-select-item h2 {
	font-weight: normal;
	font-size: 30rpx;
}

.city-calendar .city-select-item h2 em {
	font-style: normal;
	color: #666666;
	font-size: 30rpx;
	font-weight: normal;
}

.city-select .city-fr h2 {
	font-style: normal;
	color: #666666;
	font-size: 26rpx;
	font-weight: normal;
	position: relative;
}

.cell-checkbox-uncheck:after {
	content: '';
	width: 32rpx;
	height: 32rpx;
	display: block;
	border-radius: 100%;
	background-image: url();
	background-size: 32rpx;
}

.cell-checkbox-check:after {
	content: '';
	width: 32rpx;
	height: 32rpx;
	display: block;
	border-radius: 100%;
	background-image: url();
	background-size: 32rpx;
}

.cell-item {
	display: flex;
	position: relative;
	overflow: hidden;
	font-size: 32rpx;
	color: #333;
	float: left;
	margin: 0 0.4rem 0 0.8rem;
}

.cell-left {
	width: 100%;
	color: #666666;
	font-size: 0.75rem;
	white-space: nowrap;
	display: flex;
	align-items: center;
}

.icon {
	width: 40rpx;
	height: 40rpx;
	display: inline-block;
	background-repeat: no-repeat;
	background-size: 40rpx;
}

.icon-location {
	background-image: url('');
	width: 30rpx;
	height: 30rpx;
	background-size: 30rpx;
	position: absolute;
	right: 0;
	bottom: 0.15rem;
}

.icon-add {
	width: 30rpx;
	height: 30rpx;
	background-size: 30rpx;
	position: absolute;
	left: 3.2rem;
	bottom: 0.01rem;
	background-image: url('');
}
</style>